<template>
  <div style="background-color:rgb(247, 242, 242)">
    <!-- 导航栏 -->
    <van-nav-bar :fixed="true">
      <template #left>
        <van-icon @click="goBack" name="arrow-left" size="18" />
        <span style="color:#2891FA">返回</span>
      </template>
      <template #title>
        <van-search @focus='onFocus' @input="inputVlueChange" v-model="valueInput" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
        <van-icon @click="getSerchInput" name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 主体部份 -->
    <van-tabs v-model="currentIndex" class="marginTop">
      <van-tab title="服务">
        <!-- 字体图标 -->
        <template #title>
          服务
          <i style="padding-left: 3px;" class="fa fa-caret-down" aria-hidden="true"></i>
        </template>
        <!-- 下拉菜单 1-->
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            ref="item1"
            @change="changeItem(1)"
          >
            <div style="padding: 5px 16px;">
              <van-button type="default" @click="onConfirm(1)">重置</van-button>
              <van-button type="danger" @click="onConfirm(1)">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            ref="item2"
            @change="changeItem(2)"
          >
            <div style="padding: 5px 16px;">
              <van-button type="default" @click="onConfirm(2)">重置</van-button>
              <van-button type="danger" @click="onConfirm(2)">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item
            v-model="value3"
            :options="option3"
            ref="item3"
            @change="changeItem(3)"
          >
            <div style="padding: 5px 16px;">
              <van-button type="default" @click="onConfirm(3)">重置</van-button>
              <van-button type="danger" @click="onConfirm(3)">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item
            v-model="value4"
            :options="option4"
            ref="item4"
            @change="changeItem(4)"
          >
            <div style="padding: 5px 16px;">
              <van-button type="default" @click="onConfirm(4)">重置</van-button>
              <van-button type="danger" @click="onConfirm(4)">确认</van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-tab>
      <van-tab title="分类">
        <!-- 字体图标 -->
        <template #title>
          分类
          <i style="padding-left: 3px;" class="fa fa-caret-down" aria-hidden="true"></i>
        </template>
        <!-- 下拉菜单 2-->
      </van-tab>
      <van-tab title="价格">
        <!-- 字体图标 -->
        <template #title>
          价格
          <i @click="clickPriceSort" style="padding-left: 3px;" :class="{'fa fa-caret-down': down,'fa fa-caret-up': up}" aria-hidden="true"></i>
        </template>
      </van-tab>
      <van-tab title="筛选">
        <!-- 字体图标 -->
        <template #title>
          筛选
          <i
            style="padding-left: 3px;"
            class="fa fa-caret-down"
            aria-hidden="true"
            @click="clickShowPopup"
          ></i>
        </template>
      </van-tab>
    </van-tabs>
    <!-- 水平滑动效果 -->
    <div class="lateral-sliding">
      <div class="lateral-sliding-item" v-for="(item,index) in items" :key="index">
        <div class="each-img">
          <img :src="item.http" alt />
          <p>智能猫眼</p>
        </div>
      </div>
    </div>
    <!-- 商品列表页面 -->
    <ul id="goodUlBox">
      <li v-for="item in goodList" :key="item.id">
        <div class="goodLeft">
          <img :src="item.img_url" alt />
        </div>
        <div class="goodRight">
          <div style="margin-top:8px">
            <van-tag round color="#7232dd">小米618</van-tag>
            <span style="padding-left:8px">{{item.title[0]}}</span>
          </div>
          <p>{{item.zhaiyao.substring(0,40)+'...'}}</p>
          <div class="centerLi">
            <span>
              cpu
              <p style="margin-top:8px">Mtk helio</p>
            </span>
            <span>
              四摄像头
              <p>4800万+800万</p>
            </span>
            <span>
              超大屏
              <p>6.53英寸</p>
            </span>
          </div>
          <div class="goodPrice">
            <e>￥</e>
            <span class="one">{{item.sell_price}}</span>
            <e style="padding-right:6px">起</e>
            <van-tag color="#62B9F1">{{item.style? item.style:'新品'}}</van-tag>
          </div>
          <p class="pinjia">2792条评价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;98%的用户满意</p>
        </div>
      </li>
    </ul>
    <!-- 弹出层 -->
    <van-popup v-model="showPopup" position="right" :style="{ height: '100%' ,width:'80%'}">
      <!-- 弹出层的内容区域 -->
      <div class="popupTop" v-for="(item) in popupList" :key="item.id">
          <span style="fontSize:16px">{{item.title}}</span>
          <div class="popupTopInner">
            <van-tag @click="clickTag(index2,item2.id)" v-for="(item2, index2) in item.content" :key="index2" class="tagStyle"  :color="tagIndexId.includes(item2.id) ?'#f2826a':'#F5F5F5'" size="large">{{item2.name}}</van-tag>
          </div>
        <div>
        </div>
      </div>
      <div class="footPopup">
        <div style="padding: 5px 16px;">
              <van-button type="default" @click="resetForm">重置</van-button>
              <van-button type="danger" @click="sureForm">确认</van-button>
            </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import '../../mock/serchGoods.js'
export default {
  data () {
    return {
      valueInput: '',
      // 下拉框数据
      value1: 11,
      value2: 21,
      value3: 11,
      value4: 21,
      option1: [
        { text: '促销', value: 11 },
        { text: '分期', value: 12 },
        { text: '仅看有货', value: 13 }
      ],
      option2: [
        { text: '手机', value: 21 },
        { text: '配件', value: 22 }
      ],
      option3: [
        { text: '促销', value: 11 },
        { text: '分期', value: 12 },
        { text: '仅看有货', value: 13 }
      ],
      option4: [
        { text: '手机', value: 21 },
        { text: '配件', value: 22 }
      ],
      items: [
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/41cc8808268cc24668de53e7a654d5ef.png?thumb=1&w=120&h=120'
        },
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2242dabbb8191cffd7dd08eae344af6d.png?thumb=1&w=120&h=120'
        },
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/25287019d20f056e704b6af96bc5f333.png?thumb=1&w=120&h=120'
        },
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5e4a04963eee3640a10ca1e00c8870c0.png?thumb=1&w=120&h=120'
        },
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a75f9b46392071249e721a1f73e36b36.png?thumb=1&w=120&h=120'
        },
        {
          http:
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c47e3bd9a666749df70bfb616106758e.png?thumb=1&w=120&h=120'
        }
      ],
      // 商品列表信息
      goodList: [],
      // nav部份当前索引
      currentIndex: 0,
      serchList: [],
      // 弹出层
      showPopup: false,
      // 弹出层的数据
      popupList: [
        { id: 1, title: '服务', content: [{ id: 11, name: '促销' }, { id: 12, name: '分期' }, { id: 13, name: '仅看有货' }] },
        { id: 2, title: '分类', content: [{ id: 21, name: '手机' }, { id: 22, name: '配件' }] },
        { id: 3, title: 'CPU型号', content: [{ id: 31, name: '促销' }, { id: 32, name: '分期' }, { id: 33, name: '仅看有货' }] },
        { id: 4, title: 'CPU主频', content: [{ id: 41, name: '促销' }, { id: 42, name: '分期' }, { id: 43, name: '仅看有货' }] },
        { id: 5, title: '后置摄像头', content: [{ id: 51, name: '四摄像头' }, { id: 52, name: '三摄像头' }] },
        { id: 6, title: '屏幕尺寸', content: [{ id: 61, name: '大屏' }, { id: 62, name: '小屏' }] },
        { id: 7, title: '屏幕尺寸', content: [{ id: 71, name: '大屏' }, { id: 72, name: '小屏' }] }
      ],
      // 点击选项标签
      tagIndex: undefined,
      tagIndexId: [],
      // 价格排序
      priceSort: false,
      down: true,
      up: false
    }
  },
  mounted () {
    this.getgoodList()
  },
  methods: {
    onConfirm (val) {
      console.log(this.value1)
      if (val === 1) {
        this.getConfirmList(this.value1)
        this.$refs.item1.toggle()
      } else if (val === 2) {
        this.getConfirmList(this.value2)
        this.$refs.item2.toggle()
      } else if (val === 3) {
        this.getConfirmList(this.value3)
        this.$refs.item3.toggle()
      } else if (val === 4) {
        this.getConfirmList(this.value4)
        this.$refs.item4.toggle()
      }
    },
    async getConfirmList (id) {
      const { data: res } = await this.$http.get('/serchgoods')
      console.log(res)
      const newRes = []
      res.forEach(item => {
        item.title = item.title.split(' ')
        if (item.id.includes(id)) {
          newRes.push(item)
        }
      })
      if (newRes.length <= 0) {
        this.$toast('没有符合条件的商品')
        return
      }
      this.goodList = newRes
    },
    changeItem (val) {
      if (val === 1) {
        this.$refs.item1.toggle(true)
      } else if (val === 2) {
        this.$refs.item2.toggle(true)
      } else if (val === 3) {
        this.$refs.item3.toggle(true)
      } else if (val === 4) {
        this.$refs.item4.toggle(true)
      }
    },
    // 获取商品列表数据
    async getgoodList () {
      const { data: res } = await this.$http.get('/api/getgoods?pageindex=1')
      res.message.forEach((item) => {
        item.title = item.title.split(' ')
      })
      this.goodList = res.message
    },
    // 退回
    goBack () {
      this.$router.go(-1)
    },
    // 模糊查询
    getSerchInput () {
      console.log(this.goodList)
      if (this.valueInput.trim().length <= 0) {
      } else {
        this.goodList.forEach((item) => {
          if (item.title.join(',').includes(this.valueInput.trim())) {
            this.serchList.push(item)
            this.goodList = this.serchList
            console.log(this.serchList)
            this.serchList = []
          }
        })
      }
    },
    // 当搜索框的内容发生变化时
    inputVlueChange () {
      if (this.valueInput.trim().length <= 0) {
        this.getgoodList()
      }
    },
    // 获取焦点时
    onFocus () {
      this.getgoodList()
    },
    // 点击价格排序
    async clickPriceSort () {
      this.priceSort = !this.priceSort
      this.down = !this.down
      this.up = !this.up
      if (this.priceSort) {
        this.goodList.sort((a, b) => {
          return a.sell_price - b.sell_price
        })
      } else {
        this.goodList.sort((a, b) => {
          return b.sell_price - a.sell_price
        })
      }
    },
    // 点击显示弹出层
    clickShowPopup () {
      this.showPopup = true
    },
    // 点击重置
    resetForm () {
      this.showPopup = false
      this.tagIndexId = []
    },
    async sureForm () {
      if (this.tagIndexId.length <= 0) {
        this.showPopup = false
        return
      }
      const { data: res } = await this.$http.get('/serchgoods')
      const newRes = []
      res.forEach(item => {
        item.title = item.title.split(' ')
        this.tagIndexId.forEach(val => {
          if (item.id.includes(val)) {
            if (!newRes.includes(item)) {
              newRes.push(item)
            }
          }
        })
      })
      if (newRes.length <= 0) {
        this.$toast('没有符合条件的商品')
        return
      }
      this.goodList = newRes
      this.showPopup = false
      this.tagIndexId = []
    },
    // 点击选项标签
    clickTag (idx, id) {
      if (this.tagIndexId.includes(id)) {
        const idx = this.tagIndexId.findIndex(item => {
          return item === id
        })
        this.tagIndexId.splice(idx, 1)
        return
      }
      this.tagIndexId.push(id)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  display: none;
}
.van-search {
  width: 300px;
}
.marginTop {
  margin-top: 46px;
}
/deep/.fontSize {
  font-size: 16px;
}
/deep/.van-grid-item__text {
  font-size: 16px;
}
//下拉菜单
.van-button {
  width: 50%;
}
// 水平滑动效果
.lateral-sliding {
  margin: 6px 0;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  background-color: #fff;
}
.each-img {
  width: 100px;
  height: 88px;
  text-align: center;
}
.each-img img {
  margin: 6px 0;
  width: 40px;
}
.each-img p {
  font-size: 12px;
  margin: 4px 0;
}
//商品列表样式
#goodUlBox li {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
}
#goodUlBox li .goodLeft {
  flex: 1;
  text-align: center;
  width: 150px;
  padding: 10px;
}
#goodUlBox li img {
  width: 120px;
  height: 120px;
  margin-top: 25px;
}
#goodUlBox li .goodRight {
  flex: 3;
  // background-color: pink;
}
#goodUlBox li p {
  font-size: 12px;
  color: #ff804c;
  margin: 4px 0;
}
#goodUlBox li .centerLi {
  display: flex;
}
#goodUlBox li .centerLi span {
  flex: 1;
  display: block;
  text-align: center;
  color: #808080;
  font-size: 14px;
}
#goodUlBox li .centerLi span:nth-child(2) {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
}
#goodUlBox li .centerLi span > p {
  color: #bdbdbd;
}
#goodUlBox li .goodPrice {
  height: 24px;
  line-height: 24px;
  display: flex;
  align-items: center;
  margin-top: 6px;
}
#goodUlBox li .goodPrice span.one {
  font-size: 20px;
  color: #ff944c;
  font-weight: 700;
}
#goodUlBox li .goodPrice e {
  color: #ff944c;
  font-size: 14px;
  line-height: 24px;
}
#goodUlBox li .pinjia {
  color: #a8a8a8;
  margin-bottom: 12px;
}
//主题内容 综合nav点击样式
/deep/.van-tabs__line {
  position: absolute;
  height: 0px;
  background-color: transparent;
  border-radius: 0px;
}
/deep/.van-tab--active {
  color: red;
}
//弹出层内容区域
.popupTop {
  margin: 20px;
}
.popupTop span {
  font-weight: normal;
}
.tagStyle {
  color: #202020;
  font-size: 14px;
  padding: 10px 15px;
   margin: 5px 10px 5px 0;
}
.popupTopInner {
  margin-top: 7px;
}
.tagStyleIndex {
  background-color: #f2826a;
}
</style>
